<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

const fullTime = ref('');
const intervalId = ref(null);

function updateTime() {
  const date = new Date();
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  const seconds = date.getSeconds().toString().padStart(2, '0');
  fullTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; // 使用.value修改ref的值  
}

onMounted(() => {
  updateTime();
  intervalId.value = setInterval(updateTime, 1000); // 不加括号  
});

onBeforeUnmount(() => {
  if (intervalId.value) {
    clearInterval(intervalId.value);
  }
});  
</script>  
  
<template>
  <div class="font">
    <dv-border-box8>
      <div class="time-container" dv-bg>
        {{ fullTime }}
      </div>
    </dv-border-box8>
  </div>
</template>  
  
<style scoped>
.font {
  display: flex;
  /* 启用Flexbox */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  font-size: 19px;
}
.time-container{
  padding-left:5px;
}
</style>